<template>
  <header>
    <div class="container">
      <img class="logo" src="../images/logo.png" alt="" />
      <div></div>
      <div>
        <i class="iconfont"></i>
        <input
          type="text"
          placeholder="添加todolist"
          class="add-todo"
          v-model.trim="content"
          @keyup.enter="handelAdd"
        />
      </div>
    </div>
  </header>
</template>
<script setup>
import { ref, defineProps } from 'vue'
const content = ref('')
const props = defineProps({
  todo: {
    type: Array,
    required: true,
  },
})

function handelAdd() {
  //判断输入的内容是否为空
  if (content.value == '') {
    alert('请输入内容')
    return
  }
  //判断书写的内容是否已经存在
  const isExist = props.todo.some((item) => item.content == content.value)
  if (isExist) {
    alert('内容已存在')
    return
  }
  //将数据添加到localstore
  const max = Math.max(...props.todo.map((item) => item.id))
  console.log(max)
  props.todo.push({
    id: max < 0 ? 1 : max + 1,
    content: content.value,
    completed: false,
  })
  content.value = ''
  localStorage.setItem('todo', JSON.stringify(props.todo))
}
</script>

<style scoped>
header {
  background-color: #6528e0;
  height: 70px;
}
.container {
  display: flex;
  align-items: center;
  width: 800px;
  height: 100%;
  margin: 0 auto;
}
.container .logo {
  width: 150px;
  height: 50px;
}
.container .add-todo {
  margin-left: 10px;
  padding: 10px 100px 10px 10px;
  outline: none;
  border: none;
}
</style>
